<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    [#include "../../../include/header.ftl" /]
    <link rel="stylesheet" href="${ctx}/static/apls/assets/css/components.min.css">
    <link rel="stylesheet" href="${ctx}/static/apls/assets/plugins/jquery-minicolors/jquery.minicolors.css">
    <link rel="stylesheet" href="${ctx}/static/apls/assets/plugins/bootstrap-colorpicker/css/colorpicker.css">
    <link rel="stylesheet" href="${ctx}/static/apls/assets/plugins/simple-line-icons/simple-line-icons.min.css">
    <script type="text/javascript" src="${ctx}/static/apls/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
    <script type="text/javascript" src="${ctx}/static/apls/assets/plugins/jquery-minicolors/jquery.minicolors.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/apls/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/apls/assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
</head>
<body>
<div class="page-content" style="padding:25px">
    <div class="col-md-12">
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h3 style="margin: 25px 0;font-size: 24px;"> Draggable Portlets
            <small style="font-size: 14px;letter-spacing: 0;font-weight: 300;color: #666;">draggable portlet samples</small>
        </h3>
        <!-- END PAGE TITLE-->
        <!-- END PAGE HEADER-->
        <div class="note note-info">
            <p> The draggable portlets powered with jQueryUI Sortable Plugin. You can use the jQueryUI Sortable API to store the portlet positions in your
                backend.
                <br> For more info check out
                <a href="http://jqueryui.com/sortable/#portlets" target="_blank"> jQueryUI Sortable Plugin's home</a>. </p>
        </div>
        <div class="row" id="sortable_portlets">
            <div class="col-md-4 column sortable">
                <div class="portlet portlet-sortable light bordered">
                    <div class="portlet-title">
                        <div class="caption font-green-sharp">
                            <i class="icon-speech font-green-sharp"></i>
                            <span class="caption-subject bold uppercase"> Portlet</span>
                            <span class="caption-helper">details...</span>
                        </div>
                        <div class="actions">
                            <a href="javascript:;" class="btn btn-circle btn-default btn-sm">
                                <i class="fa fa-plus"></i> Add </a>
                            <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="scroller" style="height:200px" data-rail-visible="1" data-rail-color="yellow" data-handle-color="#a1b2bd">
                            <h4>Heading Text</h4>
                            <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                                sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                                eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                                sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                                consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis
                                mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
                                amet fermentum. </p>
                            <p> nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est
                                non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras
                                mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi
                                erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                                sit amet fermentum. </p>
                        </div>
                    </div>
                </div>
                <div class="portlet portlet-sortable light bg-inverse">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-paper-plane font-green-haze"></i>
                            <span class="caption-subject bold font-green-haze uppercase"> Input </span>
                            <span class="caption-helper"></span>
                        </div>
                        <div class="actions">
                            <div class="portlet-input input-inline input-small">
                                <div class="input-icon right">
                                    <i class="icon-magnifier"></i>
                                    <input type="text" class="form-control input-circle" placeholder="search..."></div>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Heading text goes here...</h4>
                        <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
                            amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
                            lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis. </p>
                    </div>
                </div>
                <div class="portlet portlet-sortable box green-haze">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>Portlet
                        </div>
                        <div class="actions">
                            <a href="javascript:;" class="btn btn-default btn-sm">
                                <i class="fa fa-pencil"></i> Edit </a>
                            <a href="javascript:;" class="btn btn-default btn-sm">
                                <i class="fa fa-plus"></i> Add </a>
                            <a class="btn btn-sm btn-icon-only btn-default fullscreen" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Heading Text</h4>
                        <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
                            amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
                            lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat
                            porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur </p>
                    </div>
                </div>
                <!-- empty sortable porlet required for each columns! -->
                <div class="portlet portlet-sortable-empty"></div>
            </div>
            <div class="col-md-4 column sortable">
                <div class="portlet portlet-sortable light bg-inverse">
                    <div class="portlet-title">
                        <div class="caption font-red-sunglo">
                            <i class="icon-share font-red-sunglo"></i>
                            <span class="caption-subject bold uppercase"> Portlet</span>
                            <span class="caption-helper"></span>
                        </div>
                        <div class="actions">
                            <div class="btn-group btn-group-devided" data-toggle="buttons">
                                <label class="btn btn-circle btn-transparent grey-salsa btn-sm active">
                                    <input type="radio" name="options" class="toggle" id="option2">Week</label>
                                <label class="btn btn-circle btn-transparent grey-salsa btn-sm">
                                    <input type="radio" name="options" class="toggle" id="option2">Month</label>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="scroller" style="height:200px" data-always-visible="1" data-rail-visible="1" data-rail-color="red"
                             data-handle-color="green">
                            <h4>Heading Text</h4>
                            <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                                sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                                eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                                sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                                consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis
                                mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
                                amet fermentum. </p>
                            <p> nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est
                                non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras
                                mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi
                                erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                                sit amet fermentum. </p>
                        </div>
                    </div>
                </div>
                <div class="portlet portlet-sortable box red-sunglo">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>Portlet
                        </div>
                        <div class="actions">
                            <a href="javascript:;" class="btn btn-default btn-sm">
                                <i class="fa fa-pencil"></i> Edit </a>
                            <a href="javascript:;" class="btn btn-default btn-sm">
                                <i class="fa fa-plus"></i> Add </a>
                            <a class="btn btn-sm btn-icon-only btn-default fullscreen" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
                            amet fermentum. Duis mollis. </p>
                        <p> Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non
                            commodo luctus. </p>
                    </div>
                </div>
                <div class="portlet portlet-sortable light bordered">
                    <div class="portlet-title">
                        <div class="caption font-yellow-crusta">
                            <i class="icon-share font-yellow-crusta"></i>
                            <span class="caption-subject bold uppercase"> Portlet</span>
                            <span class="caption-helper">stats...</span>
                        </div>
                        <div class="actions">
                            <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                <i class="icon-cloud-upload"></i>
                            </a>
                            <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                <i class="icon-wrench"></i>
                            </a>
                            <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                <i class="icon-trash"></i>
                            </a>
                            <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="portlet-body"> Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                        consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor
                        ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                    </div>
                </div>
                <!-- empty sortable porlet required for each columns! -->
                <div class="portlet portlet-sortable-empty"></div>
            </div>
            <div class="col-md-4 column sortable">
                <div class="portlet portlet-sortable light bordered">
                    <div class="portlet-title tabbable-line">
                        <div class="caption">
                            <i class="icon-pin font-yellow-lemon"></i>
                            <span class="caption-subject bold font-yellow-lemon uppercase"> Tabs </span>
                        </div>
                        <ul class="nav nav-tabs">
                            <li>
                                <a href="#portlet_tab2" data-toggle="tab"> Tab 2 </a>
                            </li>
                            <li class="active">
                                <a href="#portlet_tab1" data-toggle="tab"> Tab 1 </a>
                            </li>
                        </ul>
                    </div>
                    <div class="portlet-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="portlet_tab1">
                                <h4>Tab 1 Content</h4>
                                <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
                                    facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
                                    zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                                    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ut
                                    laoreet dolore magna ut laoreet dolore magna. ut laoreet dolore magna. ut laoreet dolore magna. </p>
                            </div>
                            <div class="tab-pane" id="portlet_tab2">
                                <h4>Tab 2 Content</h4>
                                <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
                                    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portlet portlet-sortable box blue-hoki">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>Portlet
                        </div>
                        <div class="actions">
                            <a href="javascript:;" class="btn btn-default btn-sm">
                                <i class="fa fa-pencil"></i> Edit </a>
                            <div class="btn-group">
                                <a class="btn btn-sm btn-default" href="javascript:;" data-toggle="dropdown">
                                    <i class="fa fa-user"></i> User
                                    <i class="fa fa-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    <li>
                                        <a href="javascript:;">
                                            <i class="fa fa-pencil"></i> Edit </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="fa fa-trash-o"></i> Delete </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <i class="fa fa-ban"></i> Ban </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="javascript:;"> Make admin </a>
                                    </li>
                                </ul>
                            </div>
                            <a class="btn btn-sm btn-icon-only btn-default fullscreen" href="javascript:;"></a>
                        </div>
                    </div>
                    <div class="portlet-body"> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                        consectetur purus sit amet fermentum. Duis mollis. eget lacinia odio sem nec elit. Cras mattis consectetur purus
                        sit amet fermentum. Duis mollis.
                    </div>
                </div>
                <div class="portlet portlet-sortable light bg-inverse">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-puzzle font-red-flamingo"></i>
                            <span class="caption-subject bold font-red-flamingo uppercase"> Tools </span>
                            <span class="caption-helper">actions...</span>
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"> </a>
                            <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                            <a href="" class="reload"> </a>
                            <a href="" class="fullscreen"> </a>
                            <a href="" class="remove"> </a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Heading text goes here...</h4>
                        <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
                            amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
                            lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat
                            porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur. </p>
                    </div>
                </div>
                <!-- empty sortable porlet required for each columns! -->
                <div class="portlet portlet-sortable-empty"></div>
            </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
</div>
</div>
<script type="text/javascript">
    var PortletDraggable = function () {

        return {
            //main function to initiate the module
            init: function () {

                if (!jQuery().sortable) {
                    return;
                }

                $("#sortable_portlets").sortable({
                    connectWith: ".portlet",
                    items: ".portlet",
                    opacity: 0.8,
                    handle: '.portlet-title',
                    coneHelperSize: true,
                    placeholder: 'portlet-sortable-placeholder',
                    forcePlaceholderSize: true,
                    tolerance: "pointer",
                    helper: "clone",
                    tolerance: "pointer",
                    forcePlaceholderSize: !0,
                    helper: "clone",
                    cancel: ".portlet-sortable-empty, .portlet-fullscreen", // cancel dragging if portlet is in fullscreen mode
                    revert: 250, // animation in milliseconds
                    update: function (b, c) {
                        if (c.item.prev().hasClass("portlet-sortable-empty")) {
                            c.item.prev().before(c.item);
                        }
                    }
                });
            }
        };
    }();

    jQuery(document).ready(function () {
        PortletDraggable.init();
        $(".scroller").each(function () {
            if (!$(this).attr("data-initialized")) {
                var t;
                t = $(this).attr("data-height") ? $(this).attr("data-height") : $(this).css("height"),
                    $(this).slimScroll({
                        allowPageScroll: !0,
                        size: "7px",
                        color: $(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : "#bbb",
                        wrapperClass: $(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : "slimScrollDiv",
                        railColor: $(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : "#eaeaea",
                        position: "right",
                        height: t,
                        alwaysVisible: "1" == $(this).attr("data-always-visible") ? !0 : !1,
                        railVisible: "1" == $(this).attr("data-rail-visible") ? !0 : !1,
                        disableFadeOut: !0
                    }),
                    $(this).attr("data-initialized", "1")
            }
        });
      
        $('.portlet .portlet-title a.reload[data-load="true"]').click(),
            $("body").on("click", ".portlet > .portlet-title > .tools > .collapse, .portlet .portlet-title > .tools > .expand", function (t) {
                t.preventDefault();
                var e = $(this).closest(".portlet").children(".portlet-body");
                $(this).hasClass("collapse") ? ($(this).removeClass("collapse").addClass("expand"),
                        e.slideUp(200)) : ($(this).removeClass("expand").addClass("collapse"),
                        e.slideDown(200))
            })
    });
</script>
</body>
</html>